<script setup lang="ts">
interface Props {
	title: string
	subtitle: string
	icon?: string
	onClick?: () => void
}
const props = defineProps<Props>()
const emit = defineEmits<{ (e: 'click'): void }>()

const handleClick = () => {
	if (props.onClick) props.onClick()
	emit('click')
}
</script>

<template>
	<div
		class="w-full h-[74px] rounded p-2.5 gap-2 cursor-pointer transition-colors hover:bg-tertiary flex"
		@click="handleClick"
	>
		<div class="w-[54px] h-[54px] rounded rounded-full bg-secondary flex items-center justify-center">
			<img
				:src="icon"
				class="size-full object-contain"
			/>
		</div>
		<div class="flex-1">
			<div class="text-sm leading-[22px] text-primary">{{ title }}</div>
			<div class="text-xs leading-5 text-tertiary">{{ subtitle }}</div>
		</div>
	</div>
</template>
